<!DOCTYPE html>
<html>

<head>
    <title>电气数据监控 (LightningChart)</title>
    <script src="https://cdn.jsdelivr.net/npm/@lightningchart/lcjs@7.1.1/dist/lcjs.iife.js"></script>
    <style>
        #chartContainer {
            width: 100%;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="chartContainer"></div>

    <script>
        // 创建LightningChart实例
        const lcjs = require('@lightningchart/lcjs');
        const { lightningChart, AxisTickStrategies, Themes } = lcjs;

        // 创建图表
        const chart = lightningChart()
            .ChartXY({
                container: 'chartContainer',
                theme: Themes.darkGold
            })
            .setTitle('电气数据监控 (LightningChart)');

        // 配置X轴(时间轴)
        chart.getDefaultAxisX()
            .setTickStrategy(AxisTickStrategies.DateTime)
            .setTitle('时间');

        // 添加左侧Y轴(电压)
        const axisVoltage = chart.getDefaultAxisY()
            .setTitle('电压 (V)')
            .setInterval(180, 260);

        // 添加右侧Y轴(电流)
        const axisCurrent = chart.addAxisY({ opposite: true })
            .setTitle('电流 (A)')
            .setInterval(5, 15);

        // 创建电压系列
        const seriesVoltage = chart.addLineSeries({
            dataPattern: { pattern: 'ProgressiveX' },
            yAxis: axisVoltage
        })
            .setName('电压')
            .setStrokeStyle(stroke => stroke.setThickness(1));

        // 创建电流系列
        const seriesCurrent = chart.addLineSeries({
            dataPattern: { pattern: 'ProgressiveX' },
            yAxis: axisCurrent
        })
            .setName('电流')
            .setStrokeStyle(stroke => stroke.setThickness(1));

        // 生成模拟数据
        function generateData(pointCount) {
            const voltageData = [];
            const currentData = [];

            let voltage = 220;
            let current = 10;
            const now = Date.now();

            for (let i = 0; i < pointCount; i++) {
                const time = now - (pointCount - i) * 1000;
                voltage = 220 + Math.sin(i / 100) * 22;
                current = 10 + Math.sin(i / 50) * 3;

                voltageData.push({ x: time, y: Number(voltage.toFixed(2)) });
                currentData.push({ x: time, y: Number(current.toFixed(2)) });
            }

            return { voltageData, currentData };
        }

        // 生成并添加数据 (100万点)
        const data = generateData(1000000);
        seriesVoltage.add(data.voltageData);
        seriesCurrent.add(data.currentData);

        // 添加图例
        chart.addLegendBox()
            .add(chart, { series: [seriesVoltage, seriesCurrent] });

        // 窗口大小变化响应
        window.addEventListener('resize', () => {
            chart.engine.resize();
        });
    </script>
</body>

</html>